<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
		<title> TOKI Learning Center </title>
		<link rel="stylesheet" type="text/css" href="blueprint/screen.css">
		<link rel="stylesheet" type="text/css" href="script/nivo-slider/nivo-slider.css">
		<link rel="stylesheet" type="text/css" href="main_page.css">	
		<script type="text/javascript" src="script/jquery-1.6.2.js"></script>
		<script type="text/javascript" src="script/nivo-slider/jquery.nivo.slider.js"> </script>
		<script type="text/javascript"> 
			$(document).ready(function(){
				$("input.kotak1").focus(function(){
					$("input.kotak1").css("background-color","#97C9EE");
				});
				$("input.kotak1").blur(function(){
					$("input.kotak1").css("background-color","#FFFFFF");
				});
				$("input.kotak2").focus(function(){
					$("input.kotak2").css("background-color","#97C9EE");
				});
				$("input.kotak2").blur(function(){
					$("input.kotak2").css("background-color","#FFFFFF");
				});
			});			
			
			
  		</script>
	</head>

	<body>
		<div id="container">
			<div	id="header">
				<div id="navigation">
					<ul>
						<li> <a href=""> EXPLORE TOKI </a> </li>
						<li> <a href=""> BUNDEL SOAL </a> </li>
						<li> <a href=""> DISKUSI </a> </li>
					</ul>
				</div>
			</div>
			
			<div id="content" class="bordered">
				<div id="atas">
					<div class="maskot left">
						<img src="images/maskot.png" alt="maskot" height="200px" width="140px" class="mas">
					</div>
					<div class="sambutan left">
						<h1 class="sambutan"> <b>Selamat Datang</b> </h1>
						<p class="sambutan"> Selamat datang di situs <b>TOKI Learning Center</b>. Di situs ini kamu bisa belajar dan berlatih mengerjakan 						soal-soal pemrograman. Soal-soal yang ada di situs ini dikumpulkan dari kegiatan-kegiatan yang dilaksanakan oleh Tim Olimpiade 							Komputer Indonesia.</p>
						<img class="jarak push-6" src="images/bullet_blue.png" alt="bullet"> 
						<img class="jarak push-6" src="images/bullet_gray.png" alt="bullet"> 
						<img class="jarak push-6" src="images/bullet_gray.png" alt="bullet"> 
						<img class="jarak push-6" src="images/bullet_gray.png" alt="bullet"> 
					</div>
					<div class="formulir left">
						<h3 class="login"> Silakan Login </h3>
						<form action="form_login.asp" method="get" class="textbox">
							<div>
								<input type="text" class="kotak1 left" name="Nama" value="Nama Pengguna" size="29px"> 
								<input type="text" class="kotak2 left" name="Sandi" value="Sandi" size="29px"> <br>
								<input type="checkbox" class="left" name="ingat saya"> <p class="txtbox left"> ingat saya </p>
							</div>
						</form>
						<a class="sandi left" href="#LupaSandi"> Lupa sandi?</a>
						<a class="sandi left masuk" href="#Masuk"> Masuk </a>
						<div id="clear"> </div>
						<p class="akun left"> Belum punya akun? <a class="sandi" href="#daftar"> Daftar disini </a>  </p> 
						
					</div>
				</div>
				<div class="clear"> </div>
				<div id="bawah">
					<div class="leftside left">
						<h3 class="merah tebal"> BLOG POST </h3>
						<div class="left1">
							<h4 class="subjudul"> Java Programming Contest : 2nd Wave</h4>
							<p class="date"> Posted on Tuesday, July 8th 2011 </p>
							<img src="images/gambar_angka.jpg" height="100px" width="300px">
							<p class="subleft"> 
							TOKI Open Contest March 2011 akan diadakan pada Sabtu, 26 Maret 2011 pukul 19.00 s.d 22.00 WIB. Pendaftaran 								dapat dilakukan di website resmi TOKI Learning. Pendaftaran dibuka tanggal 1 Maret 2011 dan ditutup pada tanggal 20 Maret 2011. 								<a href="#more" class="more"> &#160; [read more] </a> </p> 
						</div>
						<div class="left2">
							<h4 class="subjudul"> Powershell Introduction Class </h4>
							<p class="date"> Posted on Tuesday, July 8th 2011 </p>
							<h4 class="subjudul"> Ruby on Rail Quiz. Crack this if you dare! </h4>
							<p class="date"> Posted on Tuesday, July 8th 2011 </p>
							<h4 class="subjudul"> jQuery Mobile for Smartphone Game </h4>
							<p class="date"> Posted on Tuesday, July 8th 2011 </p>
							<a class="more" href="#AllPost"> Real All Post >> </a>
						</div>
					</div>
					<div class="middleside left">
						<h3 class="merah tebal"> LATEST ACTIVITY </h3>
						<div class="submiddle">
							<img class="left" src="images/bayu.png" alt="user" width="50px" height="50px"> 
							<p class="left"> <span class="blue"> bayubagja</span> got <span class="blue">67</span> points on 
										   <span class="blue">Jumlahan</span> Problem <br> <i>3 minutes ago</i> </p>
							<div class="clear"> </div>
						</div>
						<div class="submiddle">
							<img class="left" src="images/user.jpg" alt="user" width="50px" height="50px"> 
							<p class="left"> <span class="blue"> petra</span> got <span class="blue">88</span> points on 
										   <span class="blue">Jumlahan</span> Problem <br> <i>3 minutes ago</i></p>
							<div class="clear"> </div>
						</div>
						<div class="submiddle">
							<img class="left" src="images/user.jpg" alt="user" width="50px" height="50px"> 
							<p class="left"> <span class="blue"> petra</span> got <span class="blue">78</span> points on 
										   <span class="blue">Angka 2</span> Problem <br> <i>3 minutes ago</i> </p>
							<div class="clear"> </div>
						</div>
						<div class="submiddle">
							<img class="left" src="images/bayu.png" alt="user" width="50px" height="50px"> 
							<p class="left"> <span class="blue"> bayubagja</span> got <span class="blue">95</span> points on 
										   <span class="blue">Maling Motor</span> Problem <br> <i>3 minutes ago</i> </p>
							<div class="clear"> </div>
						</div>
						<div class="submiddle">
							<img class="left" src="images/bayu.png" alt="user" width="50px" height="50px"> 
							<p class="left"> <span class="blue"> bayubagja</span> got <span class="blue">72</span> points on 
										   <span class="blue">Angka 2</span> Problem <br> <i>3 minutes ago</i> </p>
							<div class="clear"> </div>
						</div>
						<br>
						<a class="more" href="#MoreActivity"> view more >> </a>
					</div>
					<div class="rightside left">
						<div class="right1">
							<h3 class="merah tebal"> TOP 5 USERS</h3>
							<div class="left">
								<img src="images/bayu.png" alt="user" width="55px" height="55px"> <br>
								<p class="blue naik"> RianOpen </p>
								<div class="bintang_naik">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_gray.png" alt="star"> 
								</div>
								<br>
							</div>
							<div class="left">
								<img src="images/bayu.png" alt="user" width="55px" height="55px"> <br>
								<p class="blue naik"> RianOpen </p>
								<div class="bintang_naik">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_gray.png" alt="star"> 
								</div>
								<br>
							</div>
							<div class="left">
								<img src="images/bayu.png" alt="user" width="55px" height="55px"> <br>
								<p class="blue naik"> RianOpen </p>
								<div class="bintang_naik">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_gray.png" alt="star"> 
								</div>
								<br>
							</div>
							<div class="left">
								<img src="images/bayu.png" alt="user" width="55px" height="55px"> <br>
								<p class="blue naik"> RianOpen </p>
								<div class="bintang_naik">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_gray.png" alt="star"> 
								</div>
								<br>
							</div>
							<div class="left">
								<img src="images/bayu.png" alt="user" width="55px" height="55px"> <br>
								<p class="blue naik"> RianOpen </p>
								<div class="bintang_naik">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_gray.png" alt="star"> 
								</div>
								<br>
							</div>
							<div class="clear"> </div>
							<a href="#more" class="more"> view more ranklist >> </a>
						</div>
						<div class="right2">
							<h3 class="merah tebal"> TOP PROBLEMS </h3>
							<div>
								<h4 class="subjudul left"> Perubahan Minimal</h4>
								<div class="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_gray.png" alt="star">
								</div>
							</div>
							<div class="clear"> </div>
							<div>
								<h4 class="subjudul left"> Angka 2</h4>
								<div class="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_gray.png" alt="star">
								</div>
							</div>
							<div class="clear"> </div>
							<div>
								<h4 class="subjudul left"> Fungsi Pak Gaus</h4>
								<div class="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_gray.png" alt="star">
								</div>
							</div>
							<div class="clear"> </div>
							<div>
								<h4 class="subjudul left"> Rolling Ball </h4>
								<div class="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_gray.png" alt="star">
								</div>
							</div>
							<div class="clear"> </div>
							<div>
								<h4 class="subjudul left"> General Election</h4>
								<div class="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_yellow.png" alt="star">
									<img class="left" src="images/star_gray.png" alt="star">
								</div>
							</div>
							<div class="clear"> </div>
							<a href="#more" class="more"> view problems >> </a>
						</div>
					</div>
				</div>
			</div>
			
			<div id="footer" class="bordered">
				<div class="links left">
					<a class="link" href="#OurBlog"> Our Blog </a> &#160;&#160; |&#160;&#160;
					<a class="link" href="#AboutUs"> About Us  </a> &#160;&#160; | &#160;&#160;
					<a class="link" href="#ContactUs"> Contact Us </a> &#160;&#160; | &#160;&#160;
					Follow our <a class="sosialnetwork" href="" onclick="window.open(this.href,'_blank'); return false;"> Facebook </a> and 
					           <a class="sosialnetwork" href="" onclick="window.open(this.href,'_blank');return false;">Twitter</a>
				</div>
				<div class="copyright right">
					Copyright of TOKI Learning 2011
				</div>
			</div>
		</div>
	</body>
</html>
